/**
 * 聊天室前端JavaScript代码
 * 
 * 这个文件包含了聊天室前端的所有功能：
 * 1. WebSocket连接管理
 * 2. 消息发送和接收
 * 3. 用户界面交互
 * 4. 在线用户列表更新
 * 
 * 技术特点：
 * - 使用原生WebSocket API
 * - 支持JSON消息格式
 * - 实时用户状态更新
 * - 响应式界面设计
 */

// 全局变量定义
let ws = null;        // WebSocket连接对象
let connected = false; // 连接状态标志
let username = '';     // 当前用户名

/**
 * 建立WebSocket连接
 * 
 * 这个函数负责：
 * 1. 验证用户名输入
 * 2. 创建WebSocket连接
 * 3. 设置连接事件处理器
 * 4. 发送连接请求
 * 5. 处理连接状态变化
 */
function connect() {
    // 获取并验证用户名
    username = document.getElementById('usernameInput').value.trim();
    if (!username) {
        showError('请输入用户名');
        return;
    }
    
    // 禁用连接按钮，防止重复点击
    const connectBtn = document.getElementById('connectButton');
    connectBtn.disabled = true;
    connectBtn.textContent = '连接中...';
    
    // 创建WebSocket连接
    // 使用当前页面的主机地址，WebSocket路径为/ws
    ws = new WebSocket('ws://' + window.location.host + '/ws');
    
    // 连接建立成功时的处理
    ws.onopen = function() {
        console.log('WebSocket连接已建立');
        // 发送连接请求，包含用户名信息
        ws.send(JSON.stringify({
            type: 'connect',
            username: username
        }));
    };
    
    // 接收服务器消息的处理
    ws.onmessage = function(event) {
        try {
            // 解析JSON消息
            const data = JSON.parse(event.data);
            // 处理接收到的消息
            handleMessage(data);
        } catch (error) {
            console.error('解析消息失败:', error);
            showError('消息解析失败');
        }
    };
    
    // 连接关闭时的处理
    ws.onclose = function() {
        console.log('WebSocket连接已关闭');
        connected = false;
        updateStatus('连接断开', 'disconnected');
        showMessage('系统', '连接已断开', 'system');
        
        // 重新启用连接按钮
        const connectBtn = document.getElementById('connectButton');
        connectBtn.disabled = false;
        connectBtn.textContent = '连接';
        
        // 禁用消息输入，防止在未连接时发送消息
        document.getElementById('messageInput').disabled = true;
        document.getElementById('sendButton').disabled = true;
    };
    
    // 连接错误时的处理
    ws.onerror = function(error) {
        console.error('WebSocket错误:', error);
        showError('连接失败，请检查网络');
        
        // 重新启用连接按钮
        const connectBtn = document.getElementById('connectButton');
        connectBtn.disabled = false;
        connectBtn.textContent = '连接';
    };
}

/**
 * 发送聊天消息
 * 
 * 这个函数负责：
 * 1. 验证连接状态
 * 2. 获取并验证消息内容
 * 3. 通过WebSocket发送消息给服务器
 * 4. 清空输入框
 * 
 * 注意：不再立即显示自己发送的消息，而是等待服务器广播回来
 * 这样可以确保消息的一致性，避免重复显示
 */
function sendMessage() {
    // 检查是否已连接
    if (!connected) {
        showError('请先连接');
        return;
    }
    
    // 获取并验证消息内容
    const messageInput = document.getElementById('messageInput');
    const message = messageInput.value.trim();
    if (!message) {
        return; // 空消息不发送
    }
    
    // 通过WebSocket发送消息给服务器
    ws.send(JSON.stringify({
        type: 'chat',
        content: message
    }));
    
    // 清空输入框，准备下一条消息
    messageInput.value = '';
}

/**
 * 处理从服务器接收到的消息
 * 
 * 这个函数是消息处理的核心，根据消息类型进行不同处理：
 * 1. success: 连接成功，更新界面状态
 * 2. error: 错误消息，显示错误信息
 * 3. user_list: 用户列表更新，刷新在线用户列表
 * 4. 其他: 聊天消息，显示在消息区域
 * 
 * @param data 服务器发送的JSON消息对象
 */
function handleMessage(data) {
    // 根据消息类型进行不同处理
    switch (data.type) {
        case 'success':
            // 连接成功处理
            connected = true;
            updateStatus('已连接', 'connected');
            showMessage('系统', '连接成功！', 'system');
            
            // 重新启用连接按钮
            const connectBtn = document.getElementById('connectButton');
            connectBtn.disabled = false;
            connectBtn.textContent = '连接';
            
            // 启用消息输入功能
            document.getElementById('messageInput').disabled = false;
            document.getElementById('sendButton').disabled = false;
            break;
            
        case 'error':
            // 错误消息处理
            showError(data.message);
            
            // 重新启用连接按钮
            const errorConnectBtn = document.getElementById('connectButton');
            errorConnectBtn.disabled = false;
            errorConnectBtn.textContent = '连接';
            break;
            
        case 'user_list':
            // 用户列表更新处理
            updateUserList(data.users);
            break;
            
        default:
            // 处理聊天消息（包括CHAT、JOIN、LEAVE等类型）
            if (data.sender && data.content) {
                showMessage(data.sender, data.content, data.type);
            } else {
                console.error('聊天消息格式错误:', data);
            }
            break;
    }
}

// 显示消息
function showMessage(sender, content, type) {
    const messagesDiv = document.getElementById('messages');
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${type}`;
    
    const timestamp = new Date().toLocaleTimeString();
    const isOwnMessage = sender === username;
    
    if (isOwnMessage) {
        messageDiv.classList.add('own');
    } else {
        messageDiv.classList.add('other');
    }
    
    messageDiv.innerHTML = `
        <div class="message-header">
            <strong>${sender}</strong>
            <span class="timestamp">${timestamp}</span>
        </div>
        <div class="message-content">${content}</div>
    `;
    
    messagesDiv.appendChild(messageDiv);
    scrollToBottom();
}

// 显示错误消息
function showError(message) {
    showMessage('系统', message, 'error');
}

// 更新状态显示
function updateStatus(text, type) {
    const statusElement = document.getElementById('status');
    statusElement.textContent = text;
    statusElement.className = `status ${type}`;
}

// 更新用户列表
function updateUserList(users) {
    const userListDiv = document.getElementById('userList');
    const userCountSpan = document.getElementById('userCount');
    
    // 更新用户数量
    userCountSpan.textContent = users.length;
    
    // 清空用户列表
    userListDiv.innerHTML = '';
    
    if (users.length === 0) {
        userListDiv.innerHTML = '<div class="no-users">暂无在线用户</div>';
        return;
    }
    
    // 添加用户列表项
    users.forEach(user => {
        const userItem = document.createElement('div');
        userItem.className = 'user-item';
        userItem.textContent = user;
        userListDiv.appendChild(userItem);
    });
}

// 滚动到底部
function scrollToBottom() {
    const messagesDiv = document.getElementById('messages');
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

// 键盘事件处理
document.getElementById('messageInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

// 用户名输入框回车事件
document.getElementById('usernameInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        connect();
    }
});

// 连接按钮点击事件
document.getElementById('connectButton').addEventListener('click', connect);

// 发送按钮点击事件
document.getElementById('sendButton').addEventListener('click', sendMessage);

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
    // 自动聚焦到用户名输入框
    document.getElementById('usernameInput').focus();
    
    // 初始化用户列表
    updateUserList([]);
});

// 页面卸载时关闭WebSocket连接
window.addEventListener('beforeunload', function() {
    if (ws && ws.readyState === WebSocket.OPEN) {
        ws.close();
    }
}); 